<template>
    <div :class="`divOne ${isClass(floor)}`">
        <div class="divOne_left">{{ floor }}</div>
        <div class="divOne_right">{{ title }}</div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps(['title', 'floor'])

const isClass = (status: string) => {
    if (status === 'L1' || status === 'L4' || status === 'L7' || status === 'L10' || status === 'L13' || status === 'L16') {
        return 'lv'
    } else if (status === 'L2' || status === 'L5' || status === 'L8' || status === 'L11' || status === 'L14') {
        return 'lan'
    } else if (status === 'L3' || status === 'L6' || status === 'L9' || status === 'L12' || status === 'L15') {
        return 'red'
    }
}
</script>

<style lang="less" scoped>
.divOne {
    width: 112px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    overflow: hidden;

    .divOne_left {
        width: 36px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: normal;
        font-size: 16px;
        color: #FFFFFF;
        font-style: italic;
    }

    .divOne_right {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 14px;
    }
}

.red {
    background: #FDE7E7;

    .divOne_left {
        background: #FC2540;
    }

    .divOne_right {
        color: #FC2540;
    }
}

.lv {
    background: #E7FDEE;

    .divOne_left {
        background: #19D11B;
    }

    .divOne_right {
        color: #19D11B;
    }
}

.lan {
    background: #EBF4FF;

    .divOne_left {
        background: #0094FF;
    }

    .divOne_right {
        color: #0094FF;
    }
}
</style>